<!-- 平台公告 -->
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>公告管理</span>
        <div class="extra">
          <el-button type="primary" plain @click="addNotices()">添加公告</el-button>
        </div>
      </div>
    </template>

    <!-- 搜索表单 -->
    <el-form class="w-[25rem]">
      <el-form-item label="发布状态：">
        <el-select placeholder="请选择" v-model="queryParams.type" clearable>
          <el-option label="未发布" :value="0"></el-option>
          <el-option label="已发布" :value="1"></el-option>
          <el-option label="全部" :value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 公告列表 -->
    <el-table :data="noticeList" style="width: 100%">
      <el-table-column label="公告标题" prop="title" align="center"></el-table-column>
      <el-table-column label="发表内容" prop="content" align="center">
        <template #default="{ row }">
          <div class="html-ellipsis" v-html="row.content"></div>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.status === 0" type="info">未发布</el-tag>
          <el-tag v-if="row.status === 1" type="success">已发布</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发表时间" prop="date" align="center"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template #default="{ row }">
          <el-button
            icon="Search"
            circle
            plain
            type="success"
            @click="lookNoticeid(row)"
          ></el-button>
          <el-button icon="Edit" circle plain type="primary" @click="updateNotice(row)"></el-button>
          <el-button
            icon="Delete"
            circle
            plain
            type="danger"
            @click="deleteNotice(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />

    <AddNotice ref="addNoticesRef" @refresh="getList"></AddNotice>
    <lookNotice ref="lookNoticeRef"></lookNotice>
  </el-card>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from "vue";
import AddNotice from "@/views/platfrom/components/addNotice.vue";
import lookNotice from "@/views/platfrom/components/lookNotice.vue";
import { getNoticeList, deleteNotice as deleteNoticeApi } from "@/api/platfrom";
import message from "@/composable/ElMessage";
import { ElMessageBox } from "element-plus";

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  type: 2,
});

// 公告列表
const noticeList = reactive<any[]>([]);
const total = ref(0);
// 获取公告列表
const getList = async () => {
  const { data } = await getNoticeList(queryParams.type);
  // console.log(data);
  noticeList.length = 0;
  noticeList.push(...data);
  total.value = noticeList.length;
};

// 添加公告
const addNoticesRef = ref();
const addNotices = () => {
  const title = "添加公告";
  addNoticesRef.value.open(title);
};

watch(
  () => queryParams.type,
  () => {
    getList();
  }
);

// 查看公告
const lookNoticeRef = ref();
const lookNoticeid = (row: any) => {
  lookNoticeRef.value.open(row);
};

// 修改公告
const updateNotice = (row: any) => {
  // console.log(row);
  const title = "修改公告";
  addNoticesRef.value.open(title, row);
};

// 删除公告
const deleteNotice = (row: any) => {
  ElMessageBox.confirm("确定删除该公告吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await deleteNoticeApi(row.id).then((res: any) => {
        // console.log(data.code);
        if (res.code === "200") {
          message.success("删除成功");
          getList();
        }
      });
    })
    .catch(() => {
      message.info("取消删除");
    });
};

// 条数变化
const onSizeChange = (size: any) => {
  queryParams.pageSize = size;
  getList();
};
// 页数变化
const onCurrentChange = (num: any) => {
  queryParams.pageNum = num;
  getList();
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  // 不完全显示
  .html-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em; /* 统一计算基础 */
    max-height: 4.5em; /* 3 * 1.5em，确保精确截断 */
    word-wrap: break-word; /* 处理长单词或无空格内容 */
    word-break: break-word; /* 兼容旧浏览器（虽然标准是 break-all 或 keep-all）*/
    hyphens: none; /* 禁用连字符，避免奇怪断行 */
  }
}
</style>
